{% extends "_layouts/default.twig" %}

{% block style %}
    <link rel="stylesheet" href="/assets/libs/simplemde-md-editor/dist/simplemde.min.css">
    <link rel="stylesheet" href="/assets/libs/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/assets/libs/jstree/dist/themes/default/style.min.css" />
    <link rel="stylesheet" href="/assets/src/editor/index.css" />
{% endblock %}

{% block pageScript %}
    var pageEditor = {
        api: {
            'get_node' : '/_mder/editor/list',
            'get_content' : '/_mder/editor/read',
            'create_node' : '/_mder/editor/create',
            'rename_node' : '/_mder/editor/rename',
            'delete_node' : '/_mder/editor/delete',
            'move_node' : '/_mder/editor/move',
            'copy_node' : '/_mder/editor/copy',
        }
    };
{% endblock %}
{% block body %}
    <div class="panel panel-default">
            <div class="panel-heading">
                <div class="pull-right">
                    <a href="javascript:void(0);" class="btn btn-xs btn-primary access-page"><i class="fa fa-eye"></i>访问此页面</a>
                    <a href="javascript:void(0);" class="btn btn-xs btn-success submit-content"><i class="fa fa-save"></i>保存内容</a>
                </div>
                <h3 class="panel-title">编辑器</h3>
            </div>
            <div class="panel-body" style="padding: 2px;">

        <div id="container" role="main">
            <div id="tree"></div>
            <div id="data">
                <div class="content code" style="display:none;"><textarea id="code"></textarea></div>
                <div class="content markdown" style="display:none;">
                    <textarea id="setting"></textarea>
                    <textarea id="markdown" readonly="readonly"></textarea>
                </div>
                <div class="content folder" style="display:none;"></div>
                <div class="content image" style="display:none; position:relative;">
                    <img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;" />
                </div>
                <div class="content default" style="text-align:center;">Select a file from the tree.</div>
            </div>
        </div>

        </div>
    </div>
{% endblock %}

{% block bottomScript %}
    <script src="/assets/libs/simplemde-md-editor/dist/simplemde.min.js"></script>
    <script src="/assets/libs/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <script src="/assets/libs/jstree/dist/jstree.min.js"></script>
    <script src="/assets/src/editor/index.js"></script>
{% endblock %}
